<template>
  <div style="overflow: hidden">
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
        <el-breadcrumb-item :to="{ path: '/admin/index' }">
          <i class="el-icon-s-promotion"></i>
          管理后台首页
        </el-breadcrumb-item>
        <el-breadcrumb-item>来访人员信息</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
      <el-button type="primary" icon="el-icon-edit" style="margin-left: 0px;margin-bottom: 30px" @click="addNew">添加
      </el-button>
      <el-button type="warning" icon="el-icon-delete" style="margin-bottom: 30px" @click="deleteByIds">删除</el-button>
      <br>
      <el-col :span="12">
        <el-autocomplete
            class="inline-input"
            v-model="name"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
        ></el-autocomplete>
      </el-col>
      <el-table id="selectTable" :data="visitorArr" style="overflow: scroll;height: 650px;margin-top: 5px"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" :index="indexMethod" label="编号"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="relation" label="关系"></el-table-column>
        <el-table-column prop="phone" label="手机号码"></el-table-column>
        <el-table-column prop="visitTime" label="来访时间"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="warning"
                @click="visitorUpdate(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
                size="mini"
                type="info"
                @click="visitorDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="block" style="position: absolute;bottom:20px;left: 40%;">
        <el-pagination background
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[10,20,30,40,50,60]"
                       :page-size="currentPageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {exportExcelJS} from '../../../assets/exportExcel.js'

export default {
  data() {
    return {
     visitorArr: [],
      currentPage: 1,
      currentPageSize: 10,
      total: 10,
      multipleSelection: [],
      restaurants: [],
      name: '',
      oldId: '1'
    }
  }, methods: {
    addNew() {
      this.$router.push('/admin/visitor/add-new')
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      this.axios
          .create(
              {
                headers:{
                  "Authorization":localStorage.getItem("jwt")
                }
              }
          )
          .get("http://localhost:8080/checkInfo/list/alloder-Info?Content=").then((response) => {
        for (let i = 0; i < response.data.length; i++) {
          this.restaurants.push({"value": response.data[i].name, "id": response.data[i].id});
        }
      })

    },
    handleSelect(item) {
      this.oldId = item.id
      console.log(item.id);
      this.currentPage=1;
      this.loadVisitorList();
      this.loadVisitorCount();
    },
    loadVisitorList() {
      let check = {page:this.currentPage,size:this.currentPageSize,oldId:this.oldId};
      let url = "http://localhost:8080/visitors/list?" + this.qs.stringify(check);
      console.log('url=' + url);
      this.axios
          .create(
              {
                headers:{
                  "Authorization":localStorage.getItem("jwt")
                }
              }
          )
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.visitorArr = responseBody.data;
        }
      })
    },
    loadVisitorCount(){
      let url = "http://localhost:8080/visitors/"+this.oldId+"/count";
      console.log('url=' + url);
      this.axios
          .create(
              {
                headers:{
                  "Authorization":localStorage.getItem("jwt")
                }
              }
          )
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.total = responseBody.data;
        }
      })
    },
    //来访人员批量删除的方法
    deleteByIds() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请选择要删除的数据！");
        return;
      }
      let ids = [];
      console.log(this.multipleSelection);
      for (let item of this.multipleSelection) {
        ids.push(JSON.stringify(item.id));
      }
      if (confirm("您确定要删除这些数据吗？")) {
        /*console.log(this.qs.stringify({id:ids},{ arrayFormat: 'repeat'}))*/
        this.axios
            .create(
                {
                  headers:{
                    "Authorization":localStorage.getItem("jwt")
                  }
                }
            )
            .post("http://localhost:8080/visitors/deleteByIds", ids).then((response) => {
          if (response.data.state == 20000) {
            this.$message.success("删除成功！");
            this.multipleSelection = [];
            this.loadVisitorList();
            this.loadVisitorCount();
          } else {
            this.$message.error(response.data.message);
          }
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    indexMethod(index)
    {
      return (this.currentPage-1)*this.currentPageSize+index+1;
    },
    //来访人员修改方法
    visitorUpdate(i, c) {
      location.href="/admin/visitor/update?id="+c.id;
    },
    visitorDelete(i, c) {
      if(confirm("确定删除此入住信息吗?")) {
        this.axios
            .create(
                {
                  headers:{
                    "Authorization":localStorage.getItem("jwt")
                  }
                }
            )
            .get("http://localhost:8080/visitors/" + c.id + "/delete").then((response) => {
          if (response.data.state == 20000) {
            this.$message.success("删除成功!");
            this.loadVisitorList();
            this.loadVisitorCount();
          }
          else {
            this.$message.error(response.data.message);
          }
        })

      }
    },
    handleSizeChange(val) {
      this.currentPageSize=val;
      this.loadVisitorList();
    },
    handleCurrentChange(val) {
      this.currentPage=val;
      this.loadVisitorList();
    },
  },
  mounted: function () {
    this.loadVisitorCount();
    this.loadVisitorList();
    this.loadAll();
  }

}
</script>

<style scoped>

</style>